{% extends "lists/base.html" %}
{% load profile %}
{% load staticfiles %}

{% block title %}
Lists summary
{% endblock %}


{% block breadcrumb %}
<li><a href="{% url "home" %}">Home</a></li>
<li class="current">Lists</li>
{% endblock %}

{% block content %}
<div class="row">
  <div class="small-4 columns">
    <h1>Lists</h1>
  </div>
  <div class="small-8 columns clearfix header-buttons">
    <a href="{% url "new-list" %}" class="button small right">
      <i class="fi-plus"></i>
      Create a list
    </a>
  </div>
</div>
<div class="row">
  <div class="medium-6 large-3 columns">
    <h3>Latest</h3>
    <ul class="no-bullet">
      {% for list in latest %}
      <li><span class="views y-bg">{{ list.views }} <i class="fi-eye"></i></span><a href="{% url "list-single-slug" list.pk list.slug %}">{{ list.title }}</a></li>
      <hr>
      {% endfor %}
    </ul>
  </div>
  <div class="medium-6 large-3 columns">
    <h3>Most viewed</h3>
    <ul class="no-bullet">
      {% for list in most_viewed %}
      <li><span class="views y-bg">{{ list.views }} <i class="fi-eye"></i></span><a href="{% url "list-single-slug" list.pk list.slug %}">{{ list.title }}</a></li>
      <hr>
      {% endfor %}
    </ul>
  </div>
  <div class="medium-6 large-3 columns">
    <h3>Hottest</h3>
    <ul class="no-bullet">
      {% for list in hottest %}
      <li><span class="votes y-bg" data-type="list" data-id="{{list.alist__pk}}"><span class="votes-count"> {{ list.count }} </span><i class="fi-check{% if list.alist__pk in upvoted_pk %}box{% endif %}"></i></span><a href="{% url "list-single-slug" list.alist__pk list.alist__slug %}">{{ list.alist__title }}</a></li>
      <hr>
      {% endfor %}
    </ul>
  </div>
  <div class="medium-6 large-3 columns">
    <h3>Most appreciated</h3>
    <ul class="no-bullet">
      {% for list in most_voted %}
      <li><span class="votes y-bg" data-type="list" data-id="{{list.alist__pk}}"><span class="votes-count"> {{ list.count }} </span><i class="fi-check{% if list.alist__pk in upvoted_pk %}box{% endif %}"></i></span><a href="{% url "list-single-slug" list.alist__pk list.alist__slug %}">{{ list.alist__title }}</a></li>
      <hr>
      {% endfor %}
    </ul>
  </div>
</div>

<div class="row">
  <div class="large-12 columns panel">
    <h6>Legend</h6>
    <ul class="no-bullet inline-list">
      <li><a href="#"><span class="views y-bg">23 <i class="fi-eye"></i></span>I'm a list with 23 views</a></li>
      <li><a href="#"><span class="votes y-bg" data-tooltip title="Click to upvote">74 <i class="fi-check"></i></span>I'm a list with 74 votes</a></li>
    </ul>
  </div>
</div>
{% endblock %}


{% block last_body %}
{% if user.is_authenticated %}
<script>
  window.csrfToken = '{{ csrf_token }}';
</script>
<script src="{% static "js/votes.js" %}"></script>
{% else %}
<div id="login-modal" class="reveal-modal"></div>
<script>
$(function () {
  $('#vote, .votes').click(function() {
    $('#login-modal').foundation('reveal', 'open', {
      url: "http://resrc.io{% url "user-login-modal" %}"
    });
  });
});
</script>
{% endif %}
{% endblock %}
